<template>
  <div class="cate">
    <el-form :inline="true" :model="ruleForm"  ref="ruleForm">
      <el-form-item label="分类名称"  prop="name">
      <el-input  v-model="input"  placeholder="请输入广告位名称"  size="small" clearable></el-input>
     </el-form-item>
      <el-form-item>
      <el-button  size="small" type="primary" icon="el-icon-search" @click="btnSearch">搜索</el-button>
      </el-form-item>
      <el-form-item>
      <el-button  size="small" icon="el-icon-refresh-right" @click="btnReset">重置</el-button>
      </el-form-item>
   </el-form>
   <!-- 新增/导出 -->
   <div class="contentTable">
    <el-row class="action-box"  type="flex" justify="space-between">
      <el-col :span="21">
        <el-button size="small" type="primary" icon="el-icon-plus"  plain @click="addBtn">新增</el-button>
      <el-button size="small" type="warning" icon="el-icon-download"  plain>导出</el-button>
      </el-col>
     <el-col :span="3">
      <el-tooltip   effect="dark" content="关闭搜索区" placement="top">
        <el-button size="small" icon="el-icon-arrow-up"  circle  plain></el-button>
      </el-tooltip>
      <el-tooltip  effect="dark" content="刷新" placement="top">
        <el-button size="small"  icon="el-icon-refresh-right"  circle  plain @click="btnReset"></el-button>
      </el-tooltip>
      <el-button size="small"  icon="el-icon-menu"  circle  plain></el-button>
     </el-col>
    </el-row>
    <el-row>
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="default_data"
        label="#"
        width="100">
      </el-table-column>
      <el-table-column
        prop="advposname"
        label="广告位名称"
        width="220">
      </el-table-column>
      <el-table-column
        prop="advposdesc"
        label="广告位描述"
        width="220">
      </el-table-column>
      <el-table-column
        prop="advposnum"
        label="广告图数量"
        width="220">
      </el-table-column>
      <el-table-column
        prop="advpossize"
        label="广告位尺寸"
        width="220">
      </el-table-column>

      <el-table-column
        label="操作">
        <template slot-scope="scope">
        <el-button  type="primary" size="small" icon="el-icon-edit"  circle @click="editBtn(scope.row.id)" ></el-button>
        <el-button type="danger" size="small" icon="el-icon-delete" circle @click="delBtn(scope.row.id)"></el-button>
      </template>
      </el-table-column>
    </el-table>
    </el-row>
        <!-- 分页组件 -->
        <el-pagination
          layout="total,sizes,prev, pager, next,jumper"
          :page-size="queryData.size"
          :current-page.sync="queryData.page"
          :page-sizes="[10,20,40,60]"
          :total="total"
          background
          @current-change="changePage"
          @size-change="changeSize"
        />
   </div>
   <!-- 新增、修改弹窗 -->
   <el-dialog
    :title="formData.id ? '修改广告位' : '添加广告位'"
    :visible.sync="dialogShow"
    @close="closeDialog"
    >
  <el-form ref="form" :model="formData" :rules="formRules" label-width="140px">
    <el-form-item label="广告位名称" prop="advposname" size="normal">
        <el-input size="small" v-model="formData.advposname" style="width:320px" />
      </el-form-item>
    <el-form-item  label="广告位描述" prop="advposdesc" size="normal">
      <el-input size="small" :rows="2" type="textarea" v-model="formData.advposdesc" style="width:320px" />
      </el-form-item>
      <el-form-item label="广告位尺寸" prop="advpossize" size="normal">
        <el-input size="small" v-model="formData.advpossize" style="width:320px" />
      </el-form-item>
      <el-form-item style="text-align: right">
      <el-button  size="small" @click="dialogShow = false " >取消</el-button>
      <el-button  size="small"  type="primary" @click="btnOk">确定</el-button>
      </el-form-item>
  </el-form>
   </el-dialog>
  </div>
</template>

<script>
import { getPosListApi, delPosApi, addPosApi, getPosInfoApi, editPosApi } from '@/api/adv/pos'
export default {
  data() {
    return {
      input: '',
      dialogShow: false,
      formData: {
        advposname: '',
        advposdesc: '',
        advpossize: ''
      },
      formRules: {
        advposname: [{ required: true, message: '请输入', trigger: 'blur' }],
        advposdesc: [{ required: true, message: '请输入', trigger: 'blur' }],
        advpossize: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      ruleForm: {
        name: ''
      },

      tableData: [],
      queryData: {
        page: 1,
        limit: 10
      },
      total: 0
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const { data, count } = await getPosListApi(this.queryData)
      // console.log(data)
      this.tableData = data
      this.total = count
    },
    // 数量切换事件
    changeSize(val) {
      this.queryData.limit = val
      this.initData()
    },
    changePage(val) {
      this.queryData.page = val
      this.initData()
    },
    // 删除功能
    async delBtn(Id) {
      // console.log(Id)
      try {
        await this.$confirm('确认删除吗？')
      } catch (error) {
        return console.log(error)
      }
      await delPosApi(
        {
          id: Id
        }
      )
      // 提示成功
      this.$message.success('删除成功')
      // 边缘问题
      if (this.queryData.page > 1 && this.tableData.length === 1) {
        this.queryData.page--
      }
      this.initData()
    },
    // 新增功能
    // 打开弹窗
    addBtn() {
      this.dialogShow = true
    },
    async editBtn(Id) {
      this.dialogShow = true
      const res = await getPosInfoApi(
        {
          id: Id
        }
      )
      // 当数据会显的时候，已经把id传到formData里面
      this.formData = res
      // console.log(res)
    },
    // 发送请求
    async btnOk() {
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      if (this.formData.id) {
        await editPosApi(this.formData)
        this.$message.success('修改成功')
      } else {
        // 发出请求
        await addPosApi(this.formData)
        // 提示成功
        this.$message.success('新增成功')
      }
      // 列表更新
      this.initData()
      // 弹框关闭
      this.dialogShow = false
    },
    // 弹窗关闭事件
    closeDialog() {
      this.formData = {
        advposname: '',
        icon: '',
        sort_num: ''
      }
      this.$refs.form.clearValidate()
    },
    // 搜索功能
    async btnSearch() {
      const { data, count } = await getPosListApi({
        advposname: this.input,
        page: this.queryData.page,
        limit: this.queryData.limit
      })
      this.tableData = data
      this.total = count
    },
    // 重置功能
    btnReset() {
      this.initData()
      this.input = ''
    }
  }
}
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  </style>
